<h1 class='center'><%= t('unsubscribe.header') %></h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <p class="text-center">
      <%= t('unsubscribe.description') %>
    </p>

    <%= form_with url: unsubscribe_path, method: :post, local: true do |f| %>
      <%# Hidden fields to pass the actual full values for form submission %>
      <%= hidden_field_tag :email, @email %>
      <%= hidden_field_tag :token, @token %>
      <%= hidden_field_tag :issued, @issued %>

      <%# Read-only display fields - these show user-friendly values but are not submitted %>
      <%= label_tag :display_email, t('unsubscribe.email_label') %>
      <%= text_field_tag :display_email, @email, readonly: true,
                         class: "form-control",
                         style: "background-color: #f5f5f5;" %>

      <%= label_tag :display_issued, t('unsubscribe.issued_label') %>
      <%= text_field_tag :display_issued, @issued, readonly: true,
                         class: "form-control",
                         style: "background-color: #f5f5f5;" %>

      <%= label_tag :display_token, t('unsubscribe.token_label') %>
      <%= text_field_tag :display_token, (@token ? "#{@token[0..8]}..." : ""), readonly: true,
                         class: "form-control",
                         style: "background-color: #f5f5f5;" %>

      <div class="text-center">
        <%= f.submit t('unsubscribe.submit'), class: "btn btn-primary",
                     data: { confirm: t('unsubscribe.confirm_message'),
                             disable_with: t('unsubscribe.processing') } %>
      </div>
    <% end %>
  </div>
</div>
